<template>
  <div class="search-view">
    <div class="title">
      你正在预览{{ livesWeather.city }}的天气信息<span v-if="showAddIcon"
        >，可以通过右上角的"+"号按钮保存起来</span
      >
    </div>
    <div class="weather-info">
      <h1>当日气温是：{{ livesWeather.temperature }}摄氏度</h1>
      <h1>当日天气是：{{ livesWeather.weather }}</h1>
      <h1>当日风向是：{{ livesWeather.winddirection }}风</h1>
      <h1>当日风力是：{{ livesWeather.windpower }}级</h1>
    </div>
    <div class="line"></div>
    <div class="more-weather container">
      <SelectedCity></SelectedCity>
    </div>
  </div>
</template>

<script setup>
import SelectedCity from '@/components/SelectedCity.vue'

import { useWeatherStore } from '@/stores/weather'
import { storeToRefs } from 'pinia'

const { livesWeather, showAddIcon } = storeToRefs(useWeatherStore())
</script>

<style lang="scss" scoped>
.search-view {
  width: 100%;
  & * {
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }

  .title {
    padding: 8px;
    text-align: center;
    background-color: rgb(0, 78, 113);
  }

  .weather-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
  }

  .line {
    margin-top: 24px;
    border: none;
    border-bottom: 1px solid white;
    opacity: 0.1;
  }

  .more-weather {
    padding: 0 160px;
  }
}
</style>
